<template>
	<view class="pad-lr-20">
		<view class="pad-tb-40 pad-lr-20 display-sb align-items radius-16 bgfff mar-top-20" @click="openshowdate">
			<view class="fontSize-30">售后类型</view>
			<view class="display align-items">
				<view class="fontSize-30">{{after_type?.name||'请选择'}}</view>
				<!-- <image src="/static/img/icon1.png" class="ml10 wid-hig-28" mode=""></image> -->
			</view>
		</view>
		<view class="mar-top-20 pad-lr-20 pad-tb-20 radius-16 bgfff">
			<textarea name="" class="textarea width-100" placeholder="请填写售后原因" v-model="user_remark" id="" cols="30" rows="10"></textarea>
			<view class="mar-top-30 fontSize-30">上传图片</view>
			<view class="mar-top-30">
				<o-upload :imageHeight="200" :maxFile="9" @success="successimg"></o-upload>
			</view>
		</view>
		<view class="pad-tb-40 pad-lr-20 display-sb align-items radius-16 bgfff mar-top-20" @click="showx = true" v-if="sku_attr?.length>0&&after_type?.id==3">
			<view class="fontSize-30">选择换货规格</view>
			<view class="display align-items">
				<view class="fontSize-30 col-6">{{chooseInfo?.attr_name||'请选择'}}</view>
				<image src="/static/img/icon1.png" class="ml10 wid-hig-28" mode=""></image>
			</view>
		</view>
		<view class="poFi bottom-0 bgfff width-100 bottom_view">
			<view class="col-f fontSize-32 ti_btn radius-40 display-ce align-items" @click="ti_btn">
				提交
			</view>
		</view>
		<tm-picker
			:defaultValue="pickydata"
			@confirm="pickok"
			v-model:show="showdate"
			:columns="citydate3"
			v-model="pickydata"
			v-model:model-str="dateStr"
			color="#2BBEA0"
			mapKey="name"
		>
		</tm-picker>
		<!-- 规格选择弹窗 -->
		<!-- <tm-drawer v-model:show="showx" placement="bottom" :height="800" hideHeader>
		        <view class="pad-tblr-32 popup">
		            <view class="display mar-top-30">
		            	<view class="left_img">
							<image :src="goods_info?.images[0]" class="width-100 height-100 border-8" mode="aspectFill"></image>
		            	</view>
						<view class="right_txt ml20">
							<view class="fontSize-28">{{goods_info?.name}}</view>
							<view class="mar-top-8 col-D92129 fontSize-30">￥{{chooseInfo1?.attr_price||goods_info?.price}}</view>
							<view class="fontSize-24 col-6 mar-top-12">剩余库存{{chooseInfo1?.attr_stock||0}}件</view>
						</view>
		            </view>
					<view class="minheight">
					<view class="mar-top-40 " v-for="(item,index) in sku_attr">
						<view class="fontSize-28">{{item.attr_name}}</view>
						<view class="display align-items flex-wrap">
							<view class="value col-9 bgf6 fontSize-26 pad-lr-50 pad-tb-12 radius-30 mar-top-24" v-for="(item1,index1) in item.spec" @click="item1.isShow ?ruleChoose(item1.id,index):''" 
							 :class="[chooseSku[index] == item1.id ?'active':'',item1.isShow?'':'active1']">{{item1.name}}</view>
						</view>
					</view>
					</view>
					<view class="mar-top-50">
						<view class="text-align-center col-f fontSize-32 radius-40 add_b-box" @click="cklickcollect">
							确认
						</view>
					</view>
		        </view>
		</tm-drawer> -->
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import {applyAfter,orderInfo} from '@/utils/api'
import { onLoad } from '@dcloudio/uni-app';
onLoad((options)=>{
	id.value = options.id
	order_id.value = options.order_id
	
	if(options.return_type){
		return_type.value=options.return_type
		after_type.value.id=options.return_type==1?options.return_type:''
		after_type.value.name=options.return_type==1?'退款':'请选择'
		if(options.return_type==3){
			_goods_val()
		}
	}
})
const openshowdate = () =>{
	if(return_type.value==1){
		return
	}
	showdate.value = true
}
const return_type = ref(0)//进入页面带参1-退款（不可更换售后类型）
const id = ref()//商品id
const order_id = ref()//订单id

const after_type = ref({id:'',name:''})//1退款,2退货,3退换货
const user_remark = ref()//文字描述
const showdate = ref(false)
const showx = ref(false)
const pickydata = ref([0])
const dateStr = ref('')
const citydate3 = ref([{name:'退货退款',id:3},{name:'退换货',id:2},{name:'仅退款',id:4}])
const pickok =(e) =>{
	after_type.value = citydate3.value[e[0]]
}
const goods_info = ref([])//商品信息
const _goods_val =() =>{
	orderInfo({id:order_id.value}).then(res=>{
		if(res.code==1){
			if(id.value){
				res.data.goods.forEach(item=>{
					if(item.id==id.value){
						goods_info.value.push({
							id:item.id,
							num:item.num
						})						
					}
				})
			}else{
				res.data.goods.forEach(item=>{
					goods_info.value.push({
						id:item.id,
						num:item.num
					})
				})				
			}
			// _goods_spec()
		}
	})
}
//上传图片
const images = ref()
const successimg =(e,fileList) =>{
	console.log(e,fileList,18)
	let imglist = []
	fileList.forEach(item=>{
		imglist.push(JSON.parse(item.response).data.file.url)
		images.value = imglist
	})
}
//确认
const ti_btn =() =>{
	if(!after_type.value.id){
		uni.showToast({
			title:'请选择售后类型',
			icon:'none'
		})
		return
	}
	applyAfter({
		id:order_id.value,
		return_type:after_type.value.id,
		reason:user_remark.value,
		images:images.value?images.value.join(','):'',
		goods:goods_info.value
	}).then(res=>{
		uni.showToast({
			title:res.msg,
			icon:'none'
		})
		if(res.code==1){
			uni.$emit('updatainfo')
			setTimeout(()=>{
				uni.navigateBack({
					delta:1
				})
			},1500)
		}
	})
}
//规格列表
const sku_attr = ref()//规格列表
const chooseSku = ref([])//规格组合列表
const sku_list = ref()
const _goods_spec =() =>{
	goods_spec({goods_id:id.value}).then(res=>{
		if(res.code==1){
			if(res.data.spec_list.length==1){
				res.data.sku_list.forEach(item=>{
					res.data.spec_list.forEach(itemx=>{
						itemx.spec.forEach(item1=>{
							if(item.attr_id == item1.id){
								if(item.attr_stock>0){
									item1.isShow = true
								}else{
									item1.isShow = false
								}
							}
						})
					})
				})
			}else{
			res.data.spec_list.forEach(item=>{
				item.spec.forEach(item1=>{
					item1.isShow = true
				})
			})
			}
			sku_attr.value = res.data.spec_list
			sku_list.value = res.data.sku_list
		}
	})
}
const chooseInfo = ref({
	attr_stock:0
})
const chooseInfo1 = ref({
	attr_stock:0
})
const show = ref(false)//规则选择弹窗
	const ruleChoose = (id: string , indexvalue: number) => {
			sku_attr.value.forEach((item2,index2)=>{
				item2.spec.map((item3)=>{
					// if(indexvalue!=index2){
						item3.isShow = true
						
					// }
				})
			})
		if(chooseSku.value[indexvalue]){
			if(chooseSku.value[indexvalue] == id){
				chooseSku.value[indexvalue] = ''
			}else{
				chooseSku.value[indexvalue] = id
			}
		}else{
			chooseSku.value[indexvalue] = id
		}
		sku_list.value.forEach((item,index)=>{
				if(item.attr_stock==0){
					if(chooseSku.value.includes(id)){
						item.attr_id.split('|').forEach((item1,index1)=>{
							if(id!=item1){
								sku_attr.value.forEach(item2=>{
									item2.spec.map(item3=>{
										if(item1==item3.id){
											item3.isShow = false
										}
									})
								})
							}
						})
						
					}
					
				}
		})
		sku_list.value.forEach(item=>{
			if(item.attr_id==([...chooseSku.value].sort((a, b) => a - b).join('|'))){
				console.log(item,88)
				chooseInfo1.value = item
				 throw new Error('结束循环')
			}else{
				chooseInfo1.value = ''
			}
		})
	}
const cklickcollect =() =>{
	sku_list.value.forEach(item=>{
		if(item.attr_id==([...chooseSku.value].sort((a, b) => a - b).join('|'))){
			console.log(item,88)
			chooseInfo.value = item
			showx.value = false
			 throw new Error('结束循环')
		}else{
			chooseInfo.value = ''
		}
	})
}
</script>

<style lang="scss">
@import 'service.scss';
</style>
